<template>
  <div class="zl-demo ceshi">啊啊啊
    <div class="slider-box" ref="sliderBox">
      <div class="btn" :style="leftValue" @mousedown="mousedown">
        <div class="tooltip">{{modelValue}}</div>
      </div>
      <div class="modelValue" :style="percent"></div>
      <div class="totalVal"></div>
    </div>
  </div>
</template>

<script>
import { ref, toRef } from 'vue'
export default {
    name: 'zlDemo',
    props: {
    // 监听值
        value: {
            type: Number,
            default: 10
        },
        // 监听对象值
        item: {
            type: Object,
            default: function() {
                return null
            }
        }
    },
    setup(props, context) {
    // 组件的modelValue用来接收value并进行改变
        let modelValue = ref(10)
        let item = toRef(props, 'item')
        console.log(item)
        let leftValue = ref({
            left: 0
        });
        let percent = ref({
            width: 0,
            backgroundColor: item.value.attribute.sliderColor.value
        })
        return {
            modelValue,
            leftValue,
            percent
        }
    },
    components: {
    // zlDemo1
    },
    watch: {
    // 监听value变化
        value: {
            handler(v) {
                if (v === undefined) {
                    return
                }
                this.modelValue = v
            },
            deep: true,
            immediate: true
        },
        // 监听modelValue变化
        modelValue: {
            handler(v) {
                if (v === undefined) {
                    return
                }
                this.$emit('update:modelValue', {
                    value: v
                })
            },
            deep: true
        }
    },
    emit: ['update:modelValue'],
    data() {
        return {

        }
    },
    methods: {
        dragStart() {
            return false;
        },
        mousedown(evt) {
            this.$refs.sliderBox.addEventListener('mousemove', this.mousemove)
            window.addEventListener('mouseup', this.mouseup)
            console.log('按下')
        },
        mousemove(evt) {
            // console.log('yidong', evt)
            if (evt.clientX - this.$refs.sliderBox.offsetLeft <= 0) {
                this.leftValue.left = '0px'
                this.percent.width = '0%'
                this.modelValue = 0
            } else if (evt.clientX - this.$refs.sliderBox.offsetLeft >= this.$refs.sliderBox.offsetWidth) {
                this.leftValue.left = this.$refs.sliderBox.offsetWidth + 'px'
                this.percent.width = '100%'
                // this.$emit('update:modelValue', 100)
                this.modelValue = 100
            } else {
                this.leftValue.left = evt.clientX - this.$refs.sliderBox.offsetLeft + 'px'
                let modelValue = parseInt((evt.clientX - this.$refs.sliderBox.offsetLeft) / this.$refs.sliderBox.offsetWidth *
          100);
                this.percent.width = modelValue + '%'
                // this.$emit('update:modelValue', modelValue)
                this.modelValue = modelValue
            }
        },
        mouseup(evt) {
            this.$refs.sliderBox.removeEventListener('mousemove', this.mousemove)
            window.removeEventListener('mouseup', this.mouseup)
            console.log('松开')
        }
    },
    mounted() {
        console.log(this.item, this.value)
        this.maxVal = this.item ? (this.item.attribute.maxVal['value'] ? this.item.attribute.maxVal['value'] : 100) : 100
        // this.maxVal = 100
        console.log(this.maxVal)
        this.$nextTick(() => {
            let percent = this.modelValue / this.maxVal
            this.leftValue.left = percent * this.$refs.sliderBox.offsetWidth + 'px'
            this.percent.width = percent * 100 + '%'
        })
    }
}
</script>

<style scoped lang="less">
  .zl-demo {
    width: 100%;
    height: 80px;

    .ceshi {
      // width: 600px;
    }

    .slider-box {
      position: relative;
      width: 100%;
      height: 100%;
      margin: 5px 20px;

      .btn {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(-50%, -50%);
        width: 10px;
        height: 20px;
        z-index: 90;
        background: rgba(229, 229, 229, 1.0);
        border: 1px solid #9e9e9e;
        cursor: pointer;
        border-radius: 2px;

        &:hover {
          transform: translate(-50%, -50%) scale(1.2);
        }

        .tooltip {
          position: absolute;
          top: -8px;
          left: 50%;
          transform: translate(-50%, -100%);
          background: #fff;
          padding: 3px;
          border: 1px solid #d0d0d0;
          border-radius: 2px;
          user-select: none;
          font-weight: normal;

          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 8px;
            height: 8px;
            border-right: 1px solid #d0d0d0;
            border-bottom: 1px solid #d0d0d0;
            border-radius: 2px;
            transform: translate(-50%, 50%) rotate(45deg);
            background: #fff;
          }
        }
      }

      .modelValue {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        z-index: 88;
        width: 30%;
        height: 8px;
        background: #aaaaff;
      }

      .totalVal {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        z-index: 80;
        width: 100%;
        height: 8px;
        background: rgba(229, 229, 229, 1.0);
        border: 1px solid #9e9e9e;
        border-radius: 2px;
      }
    }
  }
</style>
